<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			.div{
				border: 10px solid green;
				width: 500px;
				height: 500px;
				margin: 200px auto;
				position: relative;
				overflow: hidden;
			}
			ul{
				width: 500px;
				position: absolute;
				top: 0;
				left: 0;
			}
			li{
				height: 50px;
			}
			li:nth-child(odd){
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
			</ul>
		</div>
		<script type="text/javascript">
			var div = document.querySelector("div");
			var ul = document.querySelector("ul");
			var li_arr = document.querySelectorAll("li");
			var index = 1;
			
			
			div.timer = setInterval(function(){
				if(index>10){
					ul.style.top = 0;
					index = 1;
				}
				var new_li = ul.children[index-1].cloneNode(true);
				ul.appendChild(new_li);
				animate(ul,{"top":-50*index});
				index++;
			},500)
			
			
			
			
			function animate(ele,json,fn){
				//要用定时器，先清定时器
				clearInterval(ele.timer);
				ele.timer = setInterval(function(){
					//开闭原则,用于清除定时器(修复bug)
					var bool = true;
					
					for(var k in json){
						//获取初始位置,通过getComputedStyle()获取行外样式
						var leader = parseInt(getStyle(ele,k)) || 0;
						//生成一个步长
						var step = (json[k] - leader) / 10;
						//处理步长，步长为正向上取整，为负向下取整
						step = step>0?Math.ceil(step):Math.floor(step);
						//开始出发，初始位置加上步长
						leader += step;
						//开始赋值
						ele.style[k] = leader + "px";
						//如果json里面有任意一个键值对的值没有对应leader，bool不能为true
						if(json[k] !== leader){
							bool = false;
						}
					}
					//清除定时器
					if(bool){
						clearInterval(ele.timer);
						//回调
						if(fn){
							fn();
						}
					}
				},25);
			}
			
			//封装一个获取行外样式的方法
			function getStyle(ele,attr){
				if(window.getComputedStyle){
					//w3c标准
					return window.getComputedStyle(ele,null)[attr];
				}
				//兼容ie
				return ele.currentStyle[attr];
			}
		</script>
	</body>
</html>
